<template>
	<view class="wrap">
		<u-navbar title="股票自选" back-icon-color="#fff" :background="background" back-icon-size="36" title-color="#fff"
			title-size="34" :border-bottom="false">
			<view slot="right" class="slot-right">
				<button type="default" class="btn">
					<u-icon name="search" size="36" color="#fff"></u-icon>
				</button>
				<button type="default" class="btn">
					<u-icon name="setting" size="36" color="#fff"></u-icon>
				</button>
				<button type="default" class="btn">
					<u-icon name="grid" size="36" color="#fff"></u-icon>
				</button>
			</view>
		</u-navbar>
		<view class="content">
			<view class="nav-bar">
				<u-grid :col="5" :border="false">
					<u-grid-item :custom-style="customStyle" v-for="(item, index) in grid" :index="index" :key="index">
						<image :src="item.img" mode="" class="grid-icon"></image>
						<view class="grid-text">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="banner">
				<scroll-view class="scroll-x" scroll-x="true">
					<view class="scroll-item">
						<image src="../../static/uview/images/banner.png" mode=""></image>
					</view>
					<view class="scroll-item">
						<image src="../../static/uview/images/banner.png" mode=""></image>
					</view>
					<view class="scroll-item">
						<image src="../../static/uview/images/banner.png" mode=""></image>
					</view>
				</scroll-view>
			</view>
			<view class="news">
				<view class="news-hd">
					<image src="../../static/uview/images/news-icon.png" class="icon" mode=""></image>
					<view class="title">股市<text class="text-danger">情报</text></view>
				</view>
				<view class="flex_bd news-bd">
					<view class="title ellipsis">09:31指数集体低开白酒股普跌</view>
					<view class="desc ellipsis">沪深两市集体低开，沪指低开0.31%，深成指低.</view>
				</view>
				<view class="news-ft">
					<u-icon name="arrow-right" size="28" color="#8f8f8f"></u-icon>
				</view>
			</view>
			<view class="panel">
				<view class="panel-head">
					<view class="day-stock">
						<view class="title">今日A股</view>
						<view class="stauts">交易中</view>
					</view>
					<view class="sse">
						<view class="sse-label">上证指数</view>
						<view class="sse-val flex_bd">3644.40 -18.20 -0.50%</view>
						<view class="sse-arrow">
							<u-icon name="arrow-down-fill" size="24" color="#cccccc"></u-icon>
						</view>
					</view>

				</view>
				<view class="panel-body">
					<view class="stock-row">
						<u-row gutter="20">
							<u-col span="6">
								<view class="stock-box height1">
									<view class="title">我的自选</view>
									<view class="flex-center">
										<view class="name">招商蛇口</view>
										<view class="number">001979</view>
									</view>
									<view class="percent">+<text>1.83</text>%</view>
									<view class="order">超级买单</view>
									<view class="info flex-center">
										<view class="avatar">
											<image src="../../static/uview/images/avatar.png" mode=""></image>
										</view>
										<view class="flex_bd">
											<view class="txt ellipsis ">这个股票怎么...</view>
										</view>
									</view>
								</view>
							</u-col>
							<u-col span="6">
								<view class="stock-box height2">
									<view class="title">今日热点</view>
									<view class="flex-center">
										<view class="name">锂电池</view>
										<view class="chg">-0.93%</view>
									</view>
									<view class="desc">
										Pilbara锂精矿拍卖价
										格超预期锂盐价格...
									</view>
								</view>
								<view class="stock-box height3">
									<view class="title">选股机会</view>
									<view class="flex-center">
										<view class="name">更多好工具</view>
									</view>
									<view class="tool flex-center">
										<view class="use">超百万人在使用</view>
										<u-icon name="arrow-right" size="24" color="#8c8672"></u-icon>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<view class="white">
				<view class="zx-tab">
					<view class="zx-tab__head">
						<u-tabs :list="tab" :is-scroll="false" :current="active" @change="change" font-size="34"
							inactive-color="#9d9d9d" bar-width="46" :bar-style="barStyle"
							:active-item-style="activeStyle" item-width="150rpx" bg-color="">
						</u-tabs>
					</view>
					<view class="zx-tab__content">
						<view class="zx-o">
							<scroll-view class="scroll-o" scroll-x="true">
								<view class="zx-row">
									<view class="zx-col">
										<view class="zx-box">
											<view class="zx-top">
												<view class="zx-left">
													<image src="../../static/uview/images/zx-icon1.png" mode=""
														class="icon">
													</image>
													<view class="name">晨会密报</view>
												</view>
												<view class="time">今天09:21</view>
											</view>
											<view class="title">中信建投证券:短线小心!“两桶油”盘中发飙，沪指终结六...</view>
										</view>
									</view>
									<view class="zx-col">
										<view class="zx-box">
											<view class="zx-top">
												<view class="zx-left">
													<image src="../../static/uview/images/zx-icon2.png" mode=""
														class="icon">
													</image>
													<view class="name">早盘</view>
												</view>
												<view class="time">今天09:21</view>
											</view>
											<view class="title">中信建投证券:短线小心!“两桶油”盘中发飙，沪指终结六...</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="dis-panel">
					<view class="dis-head">
						<view class="title">热评股票讨论区</view>
						<view class="change">换一换</view>
					</view>
					<view class="dis-body">
						<view class="dis-row">
							<u-row gutter="20">
								<u-col span="12">
									<view class="demo-layout bg-purple">
										<view class="demo-hd">
											<view class="name">
												上证指数讨论区
											</view>
											<view class="number">-0.43%</view>
										</view>
										<view class="demo-bd">
											<view class="person">
												<image src="../../static/uview/images/d-img1.png" mode=""></image>
												<image src="../../static/uview/images/d-img2.png" mode=""></image>
												<image src="../../static/uview/images/d-img3.png" mode=""></image>
												<image src="../../static/uview/images/d-img4.png" mode=""></image>
											</view>
											<view class="h-dis">4973人正在热议...</view>
										</view>
									</view>
								</u-col>
								<u-col span="6">
									<view class="demo-layout bg-purple2">
										<view class="demo-top">
											<view class="name">
												创业板指讨...
											</view>
											<view class="number">-1.37%</view>
										</view>
										<view class="demo-bd">
											<view class="person">
												<image src="../../static/uview/images/d-img5.png" mode=""></image>
												<image src="../../static/uview/images/d-img6.png" mode=""></image>
												<image src="../../static/uview/images/d-img7.png" mode=""></image>
												<image src="../../static/uview/images/d-img8.png" mode=""></image>
											</view>
											<view class="h-dis">正在热议...</view>
										</view>
									</view>
								</u-col>
								<u-col span="6">
									<view class="demo-layout bg-purple3">
										<view class="demo-top">
											<view class="name">
												五粮液讨论区
											</view>
											<view class="number">-1.86%</view>
										</view>
										<view class="demo-bd">
											<image src="../../static/uview/images/UP.png" class="icon" mode=""></image>
											<view class="up-dis">45%的人看涨</view>
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>
				<view class="zx-cells">
					<view class="zx-cell">
						<view class="zx-cell__hd flex-center">
							<view class="zx-item flex_bd">
								<view class="zx-bi">
									<view class="name">苹果US</view>
									<view class="number">-0.96%</view>
								</view>
							</view>
							<view class="flex_bd"></view>
						</view>
						<view class="zx-cell__bd flex-center">
							<view class="zx-info flex_bd">
								<view class="title">iPhone13系列加量不加价:售价5199元起,苹果或继续“独孤求败”</view>
								<view class="keys"><text class="name">21世纪经济报道</text><text
										class="comment">1评论</text><text class="time">42分钟前</text></view>
							</view>
							<view class="zx-pic">
								<image src="../../static/uview/images/zx1.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="zx-cell">
						<view class="zx-cell__bd flex-center">
							<view class="zx-info flex_bd">
								<view class="title">9月14号.白酒，证券，军工，医疗板块分析及后市操作策略!</view>
								<view class="keys"><text class="name">21世纪经济报道</text><text
										class="comment">1评论</text><text class="time">42分钟前</text></view>
							</view>
							<view class="zx-pic">
								<image src="../../static/uview/images/zx2.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="zx-active">
						<view class="zx-active-head flex">
							<view class="title">宁德时代带飞锂电池能重回风口么?</view>
						</view>
						<view class="zx-active-join"><text class="iconfont icon-users"></text>8622人已参与</view>
						<view class="zx-vs flex-center">
							<image src="../../static/uview/images/yes.png" class="yes" mode=""></image>
							<image src="../../static/uview/images/vs.png" class="vs" mode=""></image>
							<image src="../../static/uview/images/no.png" class="no" mode=""></image>
						</view>
					</view>
					<view class="zx-cell">
						<view class="zx-cell__hd flex-center">
							<view class="zx-item flex_bd">
								<view class="zx-bi">
									<view class="name">苹果产业链</view>
									<view class="number">-1.88%</view>
								</view>
							</view>
							<view class="flex_bd">
								<view class="zx-item flex_bd">
									<view class="zx-bi">
										<view class="name">欣旺达</view>
										<view class="number">-3.73%</view>
									</view>
								</view>
							</view>
						</view>
						<view class="zx-cell__bd flex-center">
							<view class="zx-info flex_bd">
								<view class="title">霸占热搜! iPhone13罕见降价，关注‘果链”投资机会</view>
								<view class="keys"><text class="name">券商中国</text><text class="comment">5评论</text><text
										class="time">小时前</text></view>
							</view>
							<view class="zx-pic">
								<image src="../../static/uview/images/zx3.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="zx-cell">
						<view class="zx-cell__bd flex-center">
							<view class="zx-info flex_bd">
								<view class="title">板块分析光伏，白酒，半导体，军工，个人思路与方法分享。</view>
								<view class="keys"><text class="name">小铃铛招财</text><text class="comment">81评论</text><text
										class="time">11小时前</text></view>
							</view>
							<view class="zx-pic">
								<image src="../../static/uview/images/zx1.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<u-back-top :scroll-top="scrollTop" :custom-style="backStyle"></u-back-top>
		</view>
		<u-tabbar v-model="current" inactive-color="#868686" active-color="#e95d37" :list="list"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					iconPath: "../../static/uview/images/j1.png",
					selectedIconPath: "../../static/uview/images/g1_on.png",
					text: '首页',
					pagePath: '/pages/stock/index',
				}, {
					iconPath: "../../static/uview/images/j2.png",
					selectedIconPath: "../../static/uview/images/g2_on.png",
					text: '自选',
					pagePath: '/pages/stock/optional',
				}, {
					iconPath: "../../static/uview/images/g3.png",
					selectedIconPath: "../../static/uview/images/g3_on.png",
					text: '市场',
					pagePath: '/pages/stock/market',
				}, ],
				current: 0,
				background: {
					backgroundColor: "#e73741"
				},
				customStyle: {
					padding: "12rpx 0"
				},
				grid: [{
					img: '../../static/uview/images/grid1.png',
					title: '猜涨跌'
				}, {
					img: '../../static/uview/images/grid2.png',
					title: '大盘晴雨'
				}, {
					img: '../../static/uview/images/grid3.png',
					title: '选股'
				}, {
					img: '../../static/uview/images/grid4.png',
					title: '沪深港通'
				}, {
					img: '../../static/uview/images/grid5.png',
					title: '模拟炒股'
				}, {
					img: '../../static/uview/images/grid6.png',
					title: '财富号'
				}, {
					img: '../../static/uview/images/grid7.png',
					title: '股票学堂'
				}, {
					img: '../../static/uview/images/grid8.png',
					title: '热门板块'
				}, {
					img: '../../static/uview/images/grid9.png',
					title: '热门股票'
				}],
				tab: [{
					name: '精选'
				}, {
					name: '资讯'
				}],
				active: 0,
				barStyle: {
					backgroundColor: '#ed5a44'
				},
				activeStyle: {
					color: "#1c1c1c"
				},
				scrollTop: 0,
				backStyle:{
					backgroundColor: '#fff'
				}
			}
		},
		computed: {},
		onShow() {},
		methods: {
			change(index) {
				this.active = index;
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.slot-right {
		padding-right: 30rpx;

		.btn {
			display: inline-block;
			background-color: transparent;
			height: 64rpx;
			padding: 0;
			line-height: 1.8;
			margin-left: 30rpx;
			vertical-align: middle;
		}
	}

	.content {
		padding: 20rpx 30rpx 0;
		position: relative;
	}

	.content::after {
		position: absolute;
		content: '';
		width: 140%;
		height: 200rpx;
		left: -20%;
		top: 0;
		border-radius: 0 0 50% 50%;
		background: #e73741;
	}

	.nav-bar {
		background-color: #fff;
		border-radius: 16rpx;
		position: relative;
		z-index: 11;
		margin-bottom: 44rpx;
		padding: 18rpx 0;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #202020;
	}

	.grid-icon {
		width: 58rpx;
		height: 58rpx;
		display: block;
	}

	.banner {
		margin: 0 -30rpx;
		margin-bottom: 22rpx;
	}

	.scroll-x {
		height: 120rpx;
		white-space: nowrap;
	}

	.scroll-item {
		width: 634rpx;
		height: 100%;
		display: inline-block;
		margin-right: 64rpx;
		overflow: hidden;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.news {
		background-color: #fff;
		border-radius: 16rpx;
		height: 126rpx;
		padding: 0 34rpx 0 24rpx;
		display: flex;
		margin-bottom: 24rpx;
		align-items: center;
	}

	.news-hd {
		text-align: center;
		width: 48rpx;
		margin-right: 30rpx;

		.icon {
			width: 38rpx;
			height: 38rpx;
			display: block;
			margin: 0 auto 10rpx;
		}

		.title {
			font-size: 18rpx;
			color: #1b191c;
			line-height: 1.2;
		}
	}

	.news-bd {
		padding-top: 40rpx;

		.title {
			font-size: 28rpx;
			color: #2c2c2c;
		}

		.desc {
			font-size: 24rpx;
			color: #8f8f8f;
		}
	}

	.panel {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.panel-head {
			margin-bottom: 30rpx;
		}
	}

	.sse {
		display: flex;
		align-items: center;

		.sse-label {
			font-size: 24rpx;
			color: #919191;
			margin-right: 20rpx;
		}

		.sse-val {
			font-size: 20rpx;
			color: #3d9937;
		}
	}

	.day-stock {
		display: flex;
		align-items: center;
		line-height: 36rpx;
		margin-bottom: 24rpx;

		.title {
			font-size: 34rpx;
			color: #202020;
			font-weight: bold;
			margin-right: 10rpx;
		}

		.stauts {
			font-size: 24rpx;
			color: #8d8d8d;
			border-radius: 4rpx;
			padding: 0 8rpx;
			border: 2rpx solid #c3c3c3;
		}
	}

	.stock-row {
		margin: 0 -10rpx;
	}

	.stock-box {
		background-color: #f8f8f8;
		padding: 30rpx;
		border-radius: 8rpx;

		.title {
			font-size: 26rpx;
			color: #868686;
			margin-bottom: 6rpx;
		}

		.name {
			font-size: 30rpx;
			color: #212121;
			margin-right: 10rpx;
		}

		.percent {
			font-size: 24rpx;
			color: #f75538;
			margin-top: 20rpx;

			text {
				font-size: 50rpx;
			}
		}

		.order {
			font-size: 26rpx;
			color: #8e8c8d;
			margin-bottom: 130rpx;
		}

		.chg {
			font-size: 24rpx;
			color: #31a736;
			font-weight: 600;
		}

		.info {
			.avatar {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.txt {
				font-size: 26rpx;
				color: #939393;
			}
		}

		.desc {
			font-size: 26rpx;
			color: #868686;
			line-height: 40rpx;
			margin-top: 20rpx;
		}

		.use {
			font-size: 26rpx;
			color: #868686;
			margin-right: 10rpx;
		}

		.tool {
			margin-top: 6rpx;
		}
	}

	.height1 {
		height: 440rpx;
		background: url(../../static/uview/images/g-bg1.png) no-repeat left bottom 74rpx #f8f8f8;
		background-size: 100% 130rpx;
	}

	.height2 {
		height: 240rpx;
		margin-bottom: 20rpx;
	}

	.height3 {
		height: 180rpx;
		background: url(../../static/uview/images/g-bg3.png) no-repeat right bottom #f8f8f8;
		background-size: 120rpx 134rpx;
	}

	.scroll-o {
		white-space: nowrap;
	}

	.zx-tab {
		margin-bottom: 30rpx;
	}


	.zx-tab__head {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.zx-o {
		margin-right: -30rpx;
		margin-left: -10rpx;
		padding-right: 20rpx;
	}

	.zx-box {
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		padding-right: 0;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);

		.zx-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 20rpx;
			margin-bottom: 24rpx;

			.zx-left {
				display: flex;
				align-items: center;

				.name {
					font-size: 26rpx;
					color: #0e0e0e;
				}

				.icon {
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
					display: block;
				}
			}

			.time {
				font-size: 24rpx;
				color: #7b7b7b;
			}
		}

		.title {
			font-size: 30rpx;
			color: #2e2e2e;
			line-height: 44rpx;
			white-space: normal;
		}
	}

	.dis-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #8f8f8f;
		margin-bottom: 30rpx;
	}

	.person {
		display: flex;
		align-items: center;
		margin-right: 8rpx;

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 4rpx;
			display: block;
		}
	}

	.dis-row {
		margin: 0 -10rpx;
	}

	.demo-hd {
		display: flex;
		align-items: center;
		line-height: 1;
		margin-bottom: 20rpx;

		.name {
			font-size: 32rpx;
			color: #262930;
			margin-right: 12rpx;
		}

		.number {
			color: #45993f;
		}
	}

	.demo-top {
		margin-bottom: 26rpx;
		line-height: 1;
		font-size: 32rpx;

		.name {
			color: #262930;
			margin-bottom: 10rpx;
		}

		.number {
			color: #45993f;
		}
	}

	.demo-bd {
		display: flex;
		align-items: center;

		.h-dis {
			font-size: 24rpx;
			color: #8e95a0;
		}

		.icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 6rpx;
			display: block;
		}

		.up-dis {
			font-size: 24rpx;
			color: #0a0600;
			line-height: 34rpx;
		}
	}

	.demo-layout {
		border-radius: 8rpx;
		padding: 30rpx;
		padding-top: 38rpx;
		margin-bottom: 24rpx;
	}

	.bg-purple {
		background: url(../../static/uview/images/demo-bg1.png) no-repeat right top #ebf5fe;
		background-size: 142rpx 154rpx;
	}

	.bg-purple2 {
		background: url(../../static/uview/images/demo-bg2.png) no-repeat right bottom #f7f7ff;
		background-size: 100rpx 146rpx;
	}

	.bg-purple3 {
		background: url(../../static/uview/images/demo-bg3.png) no-repeat right bottom #fcf7f1;
		background-size: 100rpx 146rpx;
	}

	.white {
		background-color: #fff;
		margin: 0 -30rpx;
		padding: 0 30rpx 30rpx;
	}


	.zx-col {
		padding: 10rpx;
		width: 460rpx;
		height: 230rpx;
		display: inline-block;
	}

	.zx-cell__hd {
		margin: 0 -12rpx;
		margin-bottom: 4rpx;

		.zx-item {
			padding: 0 12rpx;

			.zx-bi {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				border: 1rpx solid #ebebeb;
				border-radius: 8rpx;
				color: #448743;
				line-height: 46rpx;
				padding: 0 16rpx;
			}
		}
	}

	.zx-pic {
		width: 170rpx;
		height: 128rpx;
		font-size: 0;
		margin-left: 40rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.zx-info {
		.title {
			font-size: 30rpx;
			color: #2e2e2e;
			line-height: 44rpx;
			margin-bottom: 8rpx;
		}

		.keys {
			font-size: 24rpx;
			color: #929292;

			.comment {
				margin: 0 10rpx;
			}
		}
	}

	.zx-cell {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.dis-panel {
		margin-bottom: 20rpx;
	}

	.zx-active {
		margin-top: -2rpx;
		border: 1rpx solid #f8f8f8;
		border-radius: 6rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		background: url(../../static/uview/images/active-bg.png) no-repeat right 10rpx bottom;
		background-size: 120rpx 90rpx;
	}

	.zx-vs {
		margin-top: 24rpx;

		.yes {
			height: 66rpx;
			width: 190rpx;
		}

		.vs {
			width: 68rpx;
			height: 66rpx;
		}

		.no {
			height: 66rpx;
			width: 202rpx;
		}

	}

	.zx-active {
		.zx-active-head {
			margin-bottom: 16rpx;

			.title {
				font-size: 32rpx;
				color: #35312f;
				background-color: #fdfbd5;
				padding: 0 20rpx;
				line-height: 40rpx;
			}
		}

		.zx-active-join {
			font-size: 24rpx;
			color: #8c8c8c;

			.iconfont {
				font-size: 24rpx;
				margin-right: 6rpx;
			}
		}
	}
</style>
